<template>
  <el-row style="height: 100%;" v-if="collectData.questions.length !== 0">
    <el-col :span="14" style="padding: 0 40px;">
      <div @click="collectData.isShow = true" class="topbox">{{collectData.number + 1}}/{{collectData.questions.length}}</div>
      <!-- 做题 -->
      <div class="contentbox" v-if="!collectData.isSubmit[collectData.number]">
        <div class="title">
          <span>({{optype(collectData.questions[collectData.number].type)}})</span>
          {{collectData.questions[collectData.number].title}}</div>
        <div v-if="collectData.questions[collectData.number].type=='tian'">
          <el-input type="text" v-model="collectData.content" @input="changeInput"/>
          <hr>
        </div>
        <DanView :arr="collectData.questions[collectData.number].options" :current="collectData.answers[collectData.number]" @fnc="radioChange" v-if="collectData.questions[collectData.number].type=='dan' || collectData.questions[collectData.number].type=='pan'"></DanView>
        <DuoView :arr="collectData.questions[collectData.number].options" :record="collectData.record" @fnc="chooseboxChange" v-if="collectData.questions[collectData.number].type=='duo'"></DuoView>
        <el-button type="primary" @click="submit" style="margin: 10px 0; width: 100%;">答题</el-button>
      </div>
      <!-- 分析 -->
      <div class="contentbox" v-else>
        <div class="title" :class="{mb: collectData.questions[collectData.number].type!='tian'}">
          <span style="font-weight: normal;">({{ optype(collectData.questions[collectData.number].type) }})</span>
          {{collectData.questions[collectData.number].title}}</div>
        <!-- 单选、判断 -->
        <div v-if="collectData.questions[collectData.number].type == 'dan' || collectData.questions[collectData.number].type == 'pan'">
          <div v-for="item in collectData.questions[collectData.number].options" :key="item.code">
            <div :class="{falseCss: item.code==collectData.answers[collectData.number] && collectData.answers[collectData.number] != collectData.questions[collectData.number].answer, trueCss: item.code==collectData.questions[collectData.number].answer && item.code==collectData.answers[collectData.number], option: true}">{{item.code}}. {{item.option}}</div>
          </div>
        </div>
        <!-- 多选 -->
        <div v-if="collectData.questions[collectData.number].type == 'duo'">
          <div v-for="(item, index) in collectData.questions[collectData.number].options" :key="item.code">
            <div :class="{falseCss: collectData.record[index]==2, trueCss: collectData.record[index]==1, noneCss: collectData.record[index]==0, option: true}">{{item.code}}. {{item.option}}</div>
          </div>
        </div>
      </div>
      <div v-if="collectData.isSubmit[collectData.number]" class="answerbox" :class="{spcss: collectData.questions[collectData.number].type != 'tian'}">
        <div class="trueanswer" >正确答案：<text>{{collectData.questions[collectData.number].answer}}</text></div>
        <div class="myanswer" v-show="collectData.answers[collectData.number] != collectData.questions[collectData.number].answer">我的答案：<text>{{collectData.answers[collectData.number]}}</text></div>
      </div>
      <div class="dolist">
        <div @click="collectOption">{{collectData.isCancel[collectData.number] == true ? '未收藏': '已收藏'}}</div>|
        <div @click="navToComment">评论</div>
      </div>
      <div class="btnbox">
        <el-button @click="calc(-1, collectData.questions[collectData.number-1].type)" v-show="collectData.number!=0">上一题</el-button>
        <el-button type="primary" @click="calc(1, collectData.questions[collectData.number+1].type)" v-show="collectData.number!=collectData.questions.length-1">下一题</el-button>
      </div>
    </el-col>
    <el-col :span="10" style="padding: 0 20px;">
      <el-button @click="router.back()" style="width: 100%;" type="danger">返回上一页</el-button>
      <div class="analysisbox">
        <div style="margin-bottom: 1vh; font-weight: bold;">解析</div>
        <el-scrollbar height="100%">
          <text v-if="collectData.isSubmit[collectData.number]">{{collectData.questions[collectData.number].analysis}}</text>
        </el-scrollbar>
      </div>
    </el-col>
  </el-row>
  <!-- 评价列表抽屉 -->
  <el-drawer v-model="drawer" title="评价列表" style="display: flex; flex-direction: column;">
    <el-scrollbar style="height: 100%;">
      <el-input
        v-model="areatext"
        type="textarea"
        maxlength="100"
        placeholder="请输入评论"
        show-word-limit
      />
      <el-button type="primary" @click="addComment" style="width: 100%; margin: 10px 0;">新添评论</el-button>
      <div v-for="item in commentData.commentlist" :key="item.id" style="margin: 10px 0;">
        <div style="display: flex; background-color: var(--el-color-primary-light-9); padding: 10px; border-radius: 10px;">
          <el-image :src="item.imgurl ? item.imgurl : require('@/assets/logo.png')" :fit="fit" style="width: 50px; height: 50px; border-radius: 50%; flex: 1;" />
          <div style="flex: 6; padding-left: 10px;">
            <div style="font-weight: bold; display: flex; justify-content: space-between; align-items: center;">
              <div>{{item.name}}</div>
              <el-button @click="reportComment(item.id)" type="danger">举报评论</el-button>
            </div>
            <div style="margin-top: 1vw;">{{item.comment}}</div>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </el-drawer>
  <!-- 题量对话框 -->
  <el-dialog v-model="collectData.isShow" @click="collectData.isShow = false">
    <el-scrollbar height="350px">
      <div v-for="(item, index) in collectData.questions" :key="item.code" :class="{numberBtn: true, trueCss: collectData.answers[index] == collectData.questions[index].answer, falseCss: collectData.answers[index] != collectData.questions[index].answer}" @click="numberCalc(index)">{{index+1}}</div>
    </el-scrollbar>
  </el-dialog>
</template>

<script setup>
  // addcollectquestion
  import { getcollectlist, getcommentlist, addcomment, getquestions, delcollectquestions } from '../../api/question.js'
  import { ref, onBeforeMount, computed, onUnmounted } from 'vue'

  import { useRoute, useRouter } from 'vue-router'
  import { ElMessage } from 'element-plus'

  // 提交答案
  const route = useRoute()
  const router = useRouter()
  // console.log('99999999', route.query.query)

  const collectData = ref({
    isShow: false,
    record: [],
    content: '', // 填空题记录
    answers: [''],
    number: 0,
    questions: [],
    areaShow: false,
    areaTxt: '',
    isSubmit: [],
    isCancel: []
  })
  const optype = computed(() => (type) => {
    switch (type) {
      case 'tian': return '填空'
      case 'duo': return '多选'
      case 'pan': return '判断'
      case 'dan': return '单选'
    }
  })
    onBeforeMount(() => {
      // 获取题目
      getcollectlist({
        username: localStorage.getItem('token')
      }).then(res => {
        let item = {}
        for (let i = 0; i < res.collectlist.length; i++) {
          if (res.collectlist[i].foldername === route.query.foldername) {
            item = res.collectlist[i]
            break
          }
        }
        collectData.value.colletItem = item
        getquestions({
          questionIds: item.questionIds
        }).then(res => {
          collectData.value.questions = res.questions
          // 新开第一道是多选题做特殊处理
          if (res.questions[0].type === 'duo') {
            const arr = []
            for (let i = 0; i < res.questions[0].options.length; i++) {
              arr.push(false)
            }
            collectData.value.record = arr
          }
        })
      })
    })
    const foldername = route.query.foldername
    onUnmounted(() => {
      let flag = false
      const cancalIds = []
      for (let i = 0; i < collectData.value.isCancel.length; i++) {
        if (collectData.value.isCancel[i]) {
          flag = true
          cancalIds.push(collectData.value.colletItem.questionIds[i])
          collectData.value.colletItem.questionIds.splice(i, 1)
          collectData.value.isCancel.splice(i, 1)
          i--
        }
      }

      if (flag) {
        delcollectquestions({
          username: localStorage.getItem('token'),
          foldername,
          cancalIds
        })
      }
    })
    // 修改单项选择答案
    const radioChange = (code) => {
      collectData.value.answers.splice(collectData.value.number, 1, code)
      // console.log(collectData.value.answers)
    }
    // 修改多项选择答案
    const chooseboxChange = (index) => {
      // console.log(collectData.value.record)
      collectData.value.record.splice(index, 1, !collectData.value.record[index])
      let str = ''
      for (let j = 0; j < collectData.value.record.length; j++) {
        if (collectData.value.record[j]) {
          str = str + collectData.value.questions[collectData.value.number].options[j].code
        }
      }
      collectData.value.answers.splice(collectData.value.number, 1, str)
      console.log(collectData.value.answers)
    }
    // 修改填空答案
    const changeInput = (value) => {
      collectData.value.answers[collectData.value.number] = value
    }
      // 跳转题目
      const calc = (n, type) => {
        // console.log(collectData.value.number, n, type)
        if (type === 'dan' || type === 'pan') {
          danCalc(n)
        } else if (type === 'duo') {
          duoCalc(n)
        } else {
          tianCalc(n)
        }
      }
      // 下一题是单选/判断的处理
      const danCalc = (n) => {
        if (n === 1 && collectData.value.number + 1 === collectData.value.answers.length) {
          collectData.value.answers.push('')
        }
        collectData.value.number = collectData.value.number + n
      }
      // 跳转多选题时的处理
      const duoCalc = (n) => {
        // console.log(collectData.value.answers)
        collectData.value.number = collectData.value.number + n
        if (collectData.value.isSubmit[collectData.value.number]) {
          const arr = []
          let option = ''
          for (let j = 0; j < collectData.value.questions[collectData.value.number].options.length; j++) {
            option = collectData.value.questions[collectData.value.number].options[j].code
            if (collectData.value.answers[collectData.value.number].indexOf(option) === -1 && collectData.value.questions[collectData.value.number].answer.indexOf(option) !== -1) {
              // 未选
              arr.push(0)
            } else if (collectData.value.answers[collectData.value.number].indexOf(option) !== -1 && collectData.value.questions[collectData.value.number].answer.indexOf(option) !== -1) {
              // 选对
              arr.push(1)
            } else if (collectData.value.answers[collectData.value.number].indexOf(option) !== -1 && collectData.value.questions[collectData.value.number].answer.indexOf(option) === -1) {
              // 错选
              arr.push(2)
            }
          }
          collectData.value.record = arr
        } else {
          if (collectData.value.questions[collectData.value.number].type === 'duo' && collectData.value.answers.length === collectData.value.number) {
            const arr = []
            for (let i = 0; i < collectData.value.questions[collectData.value.number].options.length; i++) {
              arr.push(false)
            }
            collectData.value.record = arr
            collectData.value.answers.push('')
          } else {
            const arr = []
            for (let j = 0; j < collectData.value.questions[collectData.value.number].options.length; j++) {
              if (collectData.value.answers[collectData.value.number] !== undefined && collectData.value.answers[collectData.value.number].indexOf(collectData.value.questions[collectData.value.number].options[j].code) !== -1) {
                arr.push(true)
              } else {
                arr.push(false)
              }
            }
            collectData.value.record = arr
          }
        }
      }
      // 下一题是填空的处理
      const tianCalc = (n) => {
        collectData.value.number = collectData.value.number + n
        if (n === 1 && collectData.value.answers.length === collectData.value.number) {
          collectData.value.answers.push('')
          collectData.value.content = ''
        } else {
          collectData.value.content = collectData.value.answers[collectData.value.number]
        }
      }
  // 计算跳转到第几题
  const numberCalc = (index) => {
    const length = index - collectData.value.number
    // 判断选择的题是否有答案
    if (length > 0 && index >= collectData.value.answers.length) {
      for (let i = collectData.value.number + 1; i <= index; i++) {
        collectData.value.answers.push('')
      }
      if (collectData.value.questions[index].type === 'duo') {
        const arr = []
        for (let j = 0; j < collectData.value.questions[index].options.length; j++) {
          arr.push(false)
        }
        collectData.value.record = arr
      } else if (collectData.value.questions[index].type === 'tian') {
        collectData.value.content = ''
      }
    } else {
      // 有答案恢复记录
      if (collectData.value.questions[index].type === 'duo') {
        const arr = []
        for (let j = 0; j < collectData.value.questions[index].options.length; j++) {
          if (collectData.value.answers[index].indexOf(collectData.value.questions[index].options[j].code) !== -1) {
            arr.push(true)
          } else {
            arr.push(false)
          }
        }
        collectData.value.record = arr
      } else if (collectData.value.questions[index].type === 'tian') {
        collectData.value.content = collectData.value.answers[index]
      }
    }
    collectData.value.number = index
  }
  // 提交答案
  const submit = () => {
    if (collectData.value.isSubmit.length >= collectData.value.number) {
      collectData.value.isSubmit.splice(collectData.value.number, 1, true)
    } else {
      for (let i = collectData.value.isSubmit.length; i < collectData.value.number; i++) {
        collectData.value.isSubmit.splice(i, 1, false)
      }
      collectData.value.isSubmit.splice(collectData.value.number, 1, true)
    }

    if (collectData.value.questions[collectData.value.number].type === 'duo') {
      const arr = []
      let option = ''
      for (let j = 0; j < collectData.value.questions[collectData.value.number].options.length; j++) {
        // console.log(collectData.value.answers[collectData.value.number])
        // console.log(option)
        option = collectData.value.questions[collectData.value.number].options[j].code
        if (collectData.value.answers[collectData.value.number].indexOf(option) === -1 && collectData.value.questions[collectData.value.number].answer.indexOf(option) !== -1) {
          // 未选
          arr.push(0)
        } else if (collectData.value.answers[collectData.value.number].indexOf(option) !== -1 && collectData.value.questions[collectData.value.number].answer.indexOf(option) !== -1) {
          // 选对
          arr.push(1)
        } else if (collectData.value.answers[collectData.value.number].indexOf(option) !== -1 && collectData.value.questions[collectData.value.number].answer.indexOf(option) === -1) {
          // 错选
          arr.push(2)
        }
      }
      collectData.value.record = arr
    }
  }
  // 取消收藏操作
  const collectOption = () => {
    if (collectData.value.isCancel.length >= collectData.value.number) {
      collectData.value.isCancel.splice(collectData.value.number, 1, !collectData.value.isCancel[collectData.value.number])
    } else {
      for (let i = collectData.value.isCancel.length; i < collectData.value.number; i++) {
        collectData.value.isCancel.splice(i, 1, false)
      }
      collectData.value.isCancel.splice(collectData.value.number, 1, true)
    }
  }

  // 评价部分
  const drawer = ref(false)
  const areatext = ref('')
  const commentData = ref({
    commentlist: [],
    areatext: ''
  })
  // 打开评论抽屉
  const navToComment = () => {
    drawer.value = true
    areatext.value = ''
    getcommentlist({
      questionId: collectData.value.questions[collectData.value.number].id
    }).then(res => {
      console.log(res.commentlist)
      commentData.value.commentlist = res.commentlist
    })
  }
  // 添加评论
  const addComment = () => {
    if (areatext.value.split(' ').join('') === '') {
      ElMessage.error('输入内容不能为空')
      return
    }
    const item = {
      questionId: collectData.value.questions[collectData.value.number].id,
      username: localStorage.getItem('token'),
      comment: areatext.value
    }
    addcomment(item).then(r => {
      getcommentlist({
        questionId: collectData.value.questions[collectData.value.number].id
      }).then(res => {
        // console.log(res.commentlist)
        commentData.value.commentlist = res.commentlist
        areatext.value = ''
        ElMessage.success('添加成功')
      })
    })
  }
</script>

<style lang="less" scoped>
  .numberBtn {
    display: inline-block;
    border: 1px solid #000;
    border-radius: 50%;
    line-height: 50px;
    width: 50px;
    height: 50px;
    margin: 10px;
    text-align: center;
  }
  .trueCss {
    background-color: rgba(0, 128, 0, .3);
  }
  .falseCss {
    background-color: rgba(128, 0, 0, .3);
  }
  .noneCss {
    background-color: rgba(255, 255, 0, .3);
  }
  .topbox {
    background-color: #fff;
    height: 5vh;
    text-align: center;
    line-height: 5vh;
    margin: 2vh auto;
    font-size: 2.8vh;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 10px;
  }
  .contentbox {
    box-sizing: border-box;
    background-color: #fff;
    padding: 1vh 3vw;
    margin: 2vh auto;
    font-size: 2.8vh;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 10px;

    .title {
      font-weight: bold;
    }

    .mb {
      margin-bottom: 2vh;
    }

    .option {
      padding-left: 5vw;
      line-height: 5vh;
      margin-bottom: 1vh;
    }
  }
  .answerbox {
    box-sizing: border-box;
    background-color: #fff;
    padding: 1vh 5vw;
    margin: 2vh auto;
    font-size: 2.5vh;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 10px;

    .trueanswer {
      margin-bottom: 1vh;
      text {
        color: rgba(0, 128, 0, .5);
      }
    }

    .myanswer {
      text {
        color: rgba(128, 0, 0, .5);
      }
    }
  }
  .spcss {
    display: flex;
    justify-content: space-around;
    align-items: center;

    .trueanswer {
      margin-bottom: 0;
    }
  }
  .analysisbox {
    box-sizing: border-box;
    background-color: #fff;
    margin: 2vh auto;
    font-size: 2.5vh;
    padding: 1vh 3vw;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 10px;
    height: 80%;
  }
  .dolist {
    display: flex;
    background-color: #fff;
    justify-content: space-evenly;
    align-items: center;
    height: 6.5vh;
    margin: 2vh auto;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 10px;

    div {
      width: 100%;
      text-align: center;
    }
  }
  .btnbox {
    display: flex;
    // margin: 2vh auto;
    justify-content: space-around;
    width: 100%;

    button {
      width: 40%;
    }
  }
  .scrollbar-demo-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 10px;
    padding: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);

    .item {
      display: flex;
      justify-content: space-around;
      width: 100%;
      font-size: 15px;
      align-items: center;
    }
  }
</style>
